<template>
	<div class="mapbox" id="map"></div>
</template>

<script>
var map = {};
export default {
	data() {
		return {
			marker: ""
		};
	},
	props: {
		point: {
			type: Array,
			default: () => [] //[113.54897590, 22.35226280]
		}
	},
	mounted() {
		this.createMap();
	},
	watch: {
		point(newValue, oldValue) {
			console.log("point", this.point);
			if (newValue.length == 2 && JSON.stringify(newValue) != JSON.stringify(oldValue)) {
				if (map && Object.keys(map).length > 0) {
					this.updateLocation();
				} else {
					this.createMap();
				}
			}
		}
	},
	methods: {
		createMap() {
			//填入地图容器div的id
			map = new AMap.Map("map", {
				zoom: 20, //设置地图的缩放级别
				zooms: [8, 30], //设置地图的缩放级别区间
				center: this.point.length == 2 ? this.point : [119.91168, 28.4535], //设置地图中心点坐标
				mapStyle: "amap://styles/darkblue", //设置地图的显示样式，更改darkblue为你想要的样式
				features: ["road", "point"] //设置地图的底图元素，缺少则显示全部元素，bg区域面、point兴趣点、road道路及道路标注、building建筑物
			});
			this.marker = new AMap.Marker({
				icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
				position: this.point.length == 2 ? this.point : [119.91168, 28.4535]
			});
			this.marker.setMap(map);
		},
		updateLocation(newLng, newLat) {
			map.setCenter(this.point); // 广州经纬度
			this.marker.setPosition(this.point);
		}
	}
};
</script>

<style>
.mapbox {
	height: 100%;
	width: 100%;
}
</style>
